<template>
<div>
  <!--  返回按钮-->
  <div>
    <van-nav-bar
        title="修改地址"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />
  </div>
<!--  修改回显-->
  <div>
    <van-form>
      <van-cell-group inset>
        <van-field
            v-model="address.name"
            label="联系人"
            placeholder="联系人姓名"
            :rules="[{ required: true, message: '请填写用联系人' }]"
        />

        <van-field label="性别">
          <template #input>
            <van-radio-group v-model="address.sex" direction="horizontal">
              <van-radio name="男">先生</van-radio>
              <van-radio name="女">女士</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
            v-model="address.phone"
            label="手机号"
            placeholder="请填写手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
        />

        <van-field
            v-model="address.area"
            is-link
            readonly
            label="地区选择"
            placeholder="点击选择省市区"
            @click="b1()"
        />
        <van-popup v-model:show="showArea" position="bottom">
          <van-area
              :area-list="areaList"
              @confirm="onConfirm"
              @cancel="b2()"
          />
        </van-popup>

        <van-field
            v-model="address.doorplate"
            label="门牌号"
            placeholder="详细地址"
            :rules="[{ required: true, message: '请填写门牌号' }]"
        />

        <van-field  label="默认地址">
          <template #input>
            <van-switch v-model="address.flag" size="20" />
          </template>
        </van-field>

      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" @click="save()">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</div>
</template>

<script>
import {areaList} from "@vant/area-data";

export default {
  name: "EditAddressView",
  data(){
    return{
      areaList: areaList,
      address:{
        id:this.$route.query.id,
        uid:this.$store.state.token,
        name:"",
        sex:"",
        phone:"",
        area:'',
        doorplate:"",
        flag:true
      },
      showArea:false
    }
  },
  mounted() {
    this.axios.get("/address/one.do?id="+this.$route.query.id).then((res)=>{
      //console.log(this.$route.query.id);
      //console.log(res.data.data);
      if(res.data.code==200){
        this.address.name=res.data.data.name;
        this.address.sex=res.data.data.sex;
        this.address.phone=res.data.data.phone;
        this.address.area=res.data.data.area;
        this.address.doorplate=res.data.data.doorplate;
        this.address.flag=res.data.data.flag;
      }
    })
  },
  methods:{
    back() {
      history.back();
    },
    onConfirm(areaValues){
      //console.log(areaValues);
      this.b2();
      this.address.area = areaValues[0].name+"/"+areaValues[1].name+"/"+areaValues[2].name+"";
      //console.log(this.address.area);
    },
    save(){
        this.axios.post("/address/update.do",this.address).then((res)=>{
          if(res.data.code==200){
            this.$toast("修改成功！");
            this.$router.push("/addressList");
          }else{
            this.$toast("修改失败！");
          }
        })
    },
    b1(){
      this.showArea=true;
    },
    b2(){
      this.showArea=false;
    }
  }
}
</script>

<style scoped>

</style>